import 'dart:io';
import 'package:basic_library/src/widgets/button/button_more_color_login.dart';
import 'package:basic_library/src/widgets/button/q_line_border_button.dart';
import 'package:basic_library/src/widgets/pop_alert/q_list_menu_sheet.dart';
import 'package:flutter/material.dart';

///
/// 弹出底部菜单 - 多选
///
class QGridViewMenuSheet extends Dialog {
  final BuildContext buildContext;
  final List<ItemDataModel>? dataList;
  final List? selectIndexList;
  final String title;
  final Function? onTap;

  const QGridViewMenuSheet({
    Key? key,
    required this.buildContext,
    required this.dataList,
    required this.selectIndexList,
    this.title = "",
    this.onTap,
  }) : super(key: key);

  /// 取消对话框
  static hide(BuildContext context) {
    Navigator.of(context).pop();
  }

  /// 显示对话框
  void show() {
    // showModalBottomSheet(
    //   backgroundColor: Colors.transparent, // 重要
    //   context: context,
    //   builder: (BuildContext context) {
    //     return MenuContentView(
    //       title: title,
    //       dataList: dataList,
    //       selectIndexList: selectIndexList,
    //       tapCallback: onTap,
    //     );
    //   },
    // );
    showDialog(
      context: buildContext,
      barrierDismissible: false,
      useSafeArea: false,
      builder: (BuildContext context) {
        return MenuContentView(
          title: title,
          dataList: dataList,
          selectIndexList: selectIndexList,
          tapCallback: onTap,
        );
      },
    );
  }
}

class MenuContentView extends StatefulWidget {
  final String? title;
  final List<ItemDataModel>? dataList;
  final List? selectIndexList;
  final Function? tapCallback;

  const MenuContentView(
      {Key? key,
      this.title,
      this.dataList,
      this.selectIndexList,
      this.tapCallback})
      : super(key: key);

  @override
  _MenuContentViewState createState() => _MenuContentViewState();
}

class _MenuContentViewState extends State<MenuContentView> {
  List<ItemDataModel> _dataList = [];
  final List<ItemDataModel> _selects = [];
  List _selectIndexList = [];

  @override
  void initState() {
    _goodsTypeList();
    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }

  _updateWidget() {
    if (mounted) {
      setState(() {});
    }
  }

  _reset() {
    for (ItemDataModel e in _dataList) {
      e.select = false;
    }
    _selectIndexList = [];
    _updateWidget();
  }

  // 供应类型
  _goodsTypeList() {
    _dataList = widget.dataList!;
    if (widget.selectIndexList != null) {
      _selectIndexList = widget.selectIndexList!;
      for (var element in _selectIndexList) {
        _dataList[element].select = true;
      }
    }
    _updateWidget();
  }

  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width - 16 * 2 - 12;

    return SafeArea(
        top: false,
        bottom: false,
        child: Scaffold(
          backgroundColor: const Color(0x60000000),
          resizeToAvoidBottomInset: false,
          body: Container(
              alignment: Alignment.bottomCenter,
              color: Colors.transparent,
              child: Container(
                decoration: const BoxDecoration(
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(4),
                        topRight: Radius.circular(4)),
                    color: Colors.white),
                height: 1233 / 2,
                width: double.infinity,
                child: Stack(
                  alignment: Alignment.topRight,
                  children: [
                    Container(
                      padding: EdgeInsets.fromLTRB(
                          16,
                          24,
                          16,
                          Platform.isAndroid
                              ? 12
                              : 12 + MediaQuery.of(context).padding.bottom),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            widget.title ?? "",
                            style: const TextStyle(
                                fontSize: 16,
                                color: Color(0xFF1D2023),
                                fontWeight: FontWeight.w800),
                          ),
                          const SizedBox(
                            height: 20,
                          ),
                          Expanded(
                              child: SizedBox(
                                  width: double.infinity, child: _item())),
                          const SizedBox(
                            height: 20,
                          ),
                          Row(
                            children: [
                              SizedBox(
                                width: width / 2,
                                height: 50,
                                child: QLineBorderBtn(
                                    title: "重置", fontSize: 18, onTap: _reset),
                              ),
                              const SizedBox(width: 12),
                              SizedBox(
                                width: width / 2,
                                height: 50,
                                child: MoreColorLoginButton(
                                    title: "确定",
                                    type: true,
                                    fontSize: 18,
                                    callBack: () {
                                      if (widget.tapCallback != null) {
                                        for (ItemDataModel e in _dataList) {
                                          if (e.select == true) {
                                            _selects.add(e);
                                          }
                                        }
                                        widget.tapCallback!(
                                            _selects, _selectIndexList);
                                      }
                                      Navigator.pop(context);
                                    }),
                              )
                            ],
                          )
                        ],
                      ),
                    ),
                    GestureDetector(
                      onTap: () {
                        Navigator.pop(context);
                      },
                      child: Container(
                        margin: const EdgeInsets.only(right: 12, top: 12),
                        color: Colors.white,
                        child: const Icon(Icons.close,
                            size: 24, color: Colors.black),
                      ),
                    )
                  ],
                ),
              )),
        ));
  }

  _item() {
    return GridView.count(
      // 水平子Widget之间间距
      crossAxisSpacing: 16,
      // 垂直子Widget之间间距
      mainAxisSpacing: 16,
      // GridView内边距
      padding: const EdgeInsets.all(0),
      // 一行的Widget数量
      crossAxisCount: 3,
      // 子Widget宽高比例
      childAspectRatio: 3.0,
      //子Widget列表
      children: _dataList
          .map<Widget>((e) => GestureDetector(
                onTap: () {
                  e.select = !e.select;
                  int index = _dataList.indexOf(e);
                  if (_selectIndexList.contains(index)) {
                    if (!e.select) {
                      _selectIndexList.remove(index);
                    }
                  } else {
                    _selectIndexList.add(index);
                  }
                  _updateWidget();
                },
                child: Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(2),
                    color: e.select
                        ? const Color(0x305173F2)
                        : const Color(0xFFF1F2F6),
                  ),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Text(
                        _getName(e.name),
                        style: TextStyle(
                            fontSize: 14,
                            color: e.select
                                ? const Color(0x50436CEC)
                                : const Color(0xFF666F83)),
                      )
                    ],
                  ),
                ),
              ))
          .toList(),
    );
  }

  _getName(String name) {
    String _name = "";
    if (name.length > 6) {
      _name = name.substring(0, 6) + "...";
    } else {
      _name = name;
    }
    return _name;
  }
}
